<template>
  <view class="content">
    <view class="login-box user-head">
      <image src="@/static/images/bg2.png" mode="scaleToFill" class="img" />
      <view class="avator-box">
        <image
          :src="userInfo.avatar ? userInfo.avatar :  '@/static/images/tou.png'"
          mode="scaleToFill"
          class="avator"
        />
      </view>
      <view class="msg">
        <view class="name">{{ userInfo.nickname }}</view>
        <view class="phone"
          >剩余{{ packMsg.remainCardNum }}张次卡 共{{
            packMsg.remainUseNum
          }}次可用</view
        >
      </view>
    </view>
    <view>
      <view class="title">次卡</view>
      <view class="package-list package-list1">
        <block v-if="packageList?.length">
          <view
            v-for="item in packageList"
            :key="item.id"
            class="package-item package-item1"
          >
            <!-- <image v-if="item.id == selectPackage" class="circle" mode="scaleToFill" src="@/static/images/ic_choose_s.png"></image>
          <image v-else class="circle" mode="scaleToFill" src="@/static/images/ic_choose_n.png"></image> -->
            <view class="package2">
              <view class="name"> {{ item.name }}</view>
              <view class="money"
                >共计<text class="count"> {{ item.totalNum }} </text
                >次，使用<text class="count"> {{ item.usedNum }} </text>次</view
              >
            </view>
            <view class="remaining-time"> 剩余{{ item.remainNum }}次 </view>
          </view>
        </block>
        <up-empty
          v-else
          mode="data"
          icon="/static/images/none.png"
          text="暂无数据"
        >
        </up-empty>
      </view>
      <!-- <up-empty mode="data" v-else> </up-empty> -->
    </view>
  </view>
</template>

<script setup>
import {  UserApi } from "@/api";
import { postPackageCount, postUserPackagePage } from "@/api/user";
import { useUserStore } from "@/store/index";
const userStore = useUserStore();
const userInfo = computed(() => {
  return userStore.userInfo;
});
onLoad(() => {
  getPackPage();
});
onShow(() => {});

const packMsg = ref({});
function getPackPage() {
  UserApi.postPackageCount().then((res) => {
    console.log("33res", res);
    packMsg.value = res;
  });
  UserApi.postUserPackagePage({
    current: 1,
    size: 100,
  }).then((res) => {
    console.log("ress", res);
    packageList.value = res.records;
  });
}
const authOverlayRef = ref(null);

function toRecord() {
  uni.navigateTo({
    url: "/pagesCommon/record/index",
  });
}
function toMineCard() {
  uni.navigateTo({
    url: "/pagesMine/record",
  });
}

const packageList = ref([
  // {
  //   id: 1,
  //   name: "护理洗+按摩精洗",
  //   time: 7,
  //   intro: "适合短发",
  //   allTime: 10,
  //   useTime: 8,
  // },
  // {
  //   id: 2,
  //   name: "护理洗+按摩精洗",
  //   time: 15,
  //   intro: "适合中性、油性发质",
  //   allTime: 10,
  //   useTime: 8,
  // },
  // {
  //   id: 3,
  //   name: "护理洗+按摩精洗",
  //   time: 7,
  //   intro: "适合短发",
  //   allTime: 10,
  //   useTime: 8,
  // },
  // {
  //   id: 4,
  //   name: "护理洗+按摩精洗",
  //   time: 7,
  //   intro: "适合短发",
  //   allTime: 10,
  //   useTime: 8,
  // },
  // {
  //   id: 5,
  //   name: "护理洗+按摩精洗",
  //   time: 7,
  //   intro: "适合短发",
  //   allTime: 10,
  //   useTime: 8,
  // },
]);
</script>

<style lang="scss" scoped>
.content {
  padding: 0 24rpx;
}

.login-box {
  position: relative;
  display: flex;
  align-items: center;
  padding: 36rpx;
  margin: 30rpx 0;
  // height: ;
  // box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(142, 142, 142, 0.5);
  .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .avator-default {
    z-index: 1;
    width: 176rpx;
    height: 176rpx;
  }

  .btn-text {
    z-index: 1;
    margin-left: 26rpx;
    font-size: 44rpx;
    color: #fff;
    font-weight: 600;
    line-height: 60rpx;
  }
}

.user-head {
  align-items: flex-start;

  .avator-box {
    z-index: 1;

    .avator {
      width: 176rpx;
      height: 176rpx;
      border-radius: 50%;
    }
  }

  .msg {
    z-index: 1;
    padding: 12rpx 0;
    margin-left: 42rpx;

    .name {
      margin-bottom: 40rpx;
      font-size: 44rpx;
      color: #fff;
      font-weight: 600;
      line-height: 60rpx;
    }

    .phone {
      font-size: 32rpx;
      color: #fff;
      line-height: 44rpx;
    }
  }
}

.title {
  //   margin-left: 24rpx;
  font-weight: 600;
  font-size: 30rpx;
  color: #232323;
  line-height: 42rpx;
  margin-bottom: 32rpx;
  margin-top: 34rpx;
}

.package-item {
  //   height: 160rpx;
  background: linear-gradient(57deg, #21a3bd 0%, #27ab9c 100%);
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(142, 142, 142, 0.5);
  border-radius: 12rpx;
  margin-bottom: 24rpx;
  display: flex;
  padding: 24rpx;
  align-items: center;
  color: #fff;
  .circle {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    // border: 4rpx solid #fff;
    // .img {
    //   width: 40rpx;
    //   height: 40rpx;
    // }
  }
  .ri-box {
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
    > view {
      flex: none;

      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      &:first-child {
        flex: 1;
        text-align: center;
        font-size: 21px;
        position: relative;
        margin-left: 20rpx;
        letter-spacing: 12rpx;
        justify-content: flex-start;
        // &::after {
        //   content: "";
        //   position: absolute;
        //   top: 10px;
        //   bottom: 10px;
        //   right: 0;
        //   width: 1px;
        //   background: #fff;
        // }
      }
      &:last-child {
        margin-left: 20rpx;
      }
    }
  }
  .info-box {
    display: flex;
    flex-direction: column;
    // align-items: center;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 260rpx;
  }
  .time {
    font-size: 28rpx;
    color: #ffffff;
    line-height: 40rpx;
    margin-bottom: 24rpx;
  }
}
.package-item1 {
  .package2 {
    margin-left: 32rpx;
    .name {
      font-weight: 600;
      font-size: 44rpx;
      color: #ffffff;
      line-height: 60rpx;
      margin-bottom: 12rpx;
    }
    .money {
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 40rpx;
    }
    .count {
      color: #ff0000;
    }
  }
}
.package-list {
  flex: 1;
  overflow: auto;
}

.package-list1 {
  .package2 {
    flex: 1;
    margin-right: 16rpx;
  }
  .remaining-time {
    height: 48rpx;
    background: rgba(255, 255, 255, 0.84);
    border-radius: 8rpx;
    padding: 6rpx 24rpx;
    font-weight: 600;
    font-size: 26rpx;
    color: #27ab9c;
    align-self: flex-start;
    margin-top: 6rpx;
  }
}
</style>
